<template>
  <router-view></router-view>
</template>

<script setup>
import { useWatermark } from '@/composables/useWatermark';
import { useRoute } from 'vue-router';
import { watch, ref, onMounted, onUnmounted, computed } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { useTheme } from '@/composables/useTheme';

const route = useRoute();
const { setWatermark, clearWatermark } = useWatermark();
const userStore = useUserStore();
const { currentTheme } = useTheme();

// 当前时间
const currentTime = ref('');

// 用户信息是否已加载
const userInfoLoaded = ref(false);

// 水印是否启用
const watermarkEnabled = ref(true);

// 根据主题获取水印颜色
const watermarkColor = computed(() => {
  const root = document.documentElement;
  return getComputedStyle(root).getPropertyValue('--text-tertiary').trim() || '#999999';
});

// 根据主题获取水印透明度
const watermarkOpacity = computed(() => {
  return currentTheme.value === 'dark' ? 0.3 : 0.4;
});

// 格式化时间
const formatTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');

  // 只显示到分钟：2024-01-15 14:30
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 更新时间
const updateTime = () => {
  currentTime.value = formatTime();
};

// 定时器
let timeInterval = null;

// 获取用户信息文本
const getUserInfoText = () => {
  const userInfo = userStore.userInfo;
  if (userInfo && userInfo.username && userInfo.nickname) {
    return userInfo.username + ' ' + userInfo.nickname;
  }
  return '用户信息加载中...';
};

// 更新水印
const updateWatermark = () => {
  if (route.path !== '/login' && watermarkEnabled.value) {
    setWatermark([
      'API Hub',
      getUserInfoText(),
      currentTime.value
    ], {
      color: watermarkColor.value,
      opacity: watermarkOpacity.value,
    });
  } else if (route.path === '/login') {
    clearWatermark();
  }
};

// 延迟更新水印，等待用户信息加载
const delayedUpdateWatermark = () => {
  // 如果用户信息已加载，立即更新
  if (userInfoLoaded.value) {
    updateWatermark();
  } else {
    // 否则延迟更新，给用户信息加载一些时间
    setTimeout(() => {
      updateWatermark();
    }, 500);
  }
};

// 监听路由变化，在非登录页面显示水印
watch(() => route.path, (newPath) => {
  if (newPath === '/login') {
    clearWatermark();
    // 重置水印状态为启用
    watermarkEnabled.value = true;
    // 清除定时器
    if (timeInterval) {
      clearInterval(timeInterval);
      timeInterval = null;
    }
  } else {
    // 启动时间更新
    updateTime();
    if (!timeInterval) {
      timeInterval = setInterval(() => {
        updateTime();
        updateWatermark(); // 时间更新时同时更新水印
      }, 60000); // 每分钟更新一次（60秒 = 60000毫秒）
    }

    // 延迟更新水印，等待用户信息加载
    delayedUpdateWatermark();
  }
}, { immediate: true });

// 监听水印启用状态变化
watch(watermarkEnabled, (enabled) => {
  if (enabled) {
    updateWatermark();
  } else {
    clearWatermark();
  }
  // 发送水印状态更新事件到其他组件
  window.dispatchEvent(new CustomEvent('watermark-status-update', {
    detail: { enabled }
  }));
});

// 监听时间变化，更新水印
watch(currentTime, () => {
  if (route.path !== '/login') {
    delayedUpdateWatermark();
  }
});

// 监听主题变化，更新水印颜色
watch(currentTheme, () => {
  if (route.path !== '/login') {
    delayedUpdateWatermark();
  }
});

// 监听用户信息变化
watch(
  () => userStore.userInfo,
  (newUserInfo) => {
    // 检查用户信息是否已加载
    if (newUserInfo && newUserInfo.username && newUserInfo.nickname) {
      userInfoLoaded.value = true;
      // 用户信息加载完成后更新水印
      if (route.path !== '/login') {
        updateWatermark();
      }
    }
  },
  { deep: true, immediate: true }
);

// 处理水印切换事件
const handleWatermarkToggle = (event) => {
  watermarkEnabled.value = event.detail.enabled;
};

// 组件挂载时添加事件监听
onMounted(() => {
  window.addEventListener('watermark-toggle', handleWatermarkToggle);
});

// 组件卸载时清除定时器和事件监听
onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
  }
  window.removeEventListener('watermark-toggle', handleWatermarkToggle);
});
</script>

<style scoped></style>
